﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>

    <style>

        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* 只对class为data-table的表格应用边框 */
        .data-table, .data-table th, .data-table td {
            border: 1px solid #000;
        }



        th {
            background-color: #FFD553;
            text-align: right;
            width: 120px;
        }

        td {
            padding: 6px;
        }

        select, input, textarea {
            width: 200px;
            box-sizing: border-box;
        }

        textarea {
            height: 80px;
        }


        .avatar-uploader .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

            .avatar-uploader .el-upload:hover {
                border-color: var(--el-color-primary);
            }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }

        /* 新增样式 */
        .table-container {
            position: relative; /* 为按钮定位提供参考 */
        }

        .button-container {
            position: absolute;
            top: 0;
            right: 10px;
            margin-top: -5px; /* 与表格顶部的距离 */
            z-index: 10; /* 确保按钮在上方 */
        }

            .button-container button {
                margin-left: 10px; /* 按钮之间的间距 */
            }

        body {
            background-color: #FFFFCC;
        }

    </style>

</head>

<body>

    <div id="app">
        <span>您正在做的业务是：人力资源--人力资源档案管理--人力资源档案查看</span><br />

        <form>
            <table class="data-table">

                <tr>
                    <th>档案编号</th>
                    <td colspan="5">

                        {{form.human_id}}

                    </td>


                    <td rowspan="3" colspan="3" style="padding: 10px,10px,10px,30px; border: none; position: absolute;">

                        <el-upload class="avatar-uploader"
                                   action="/HRFR/WJSC"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl || fileName" :src="getImageUrl()" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>

                        <el-input type="hidden" name="imageFileName" v-model="imageFileName">

                    </td>





                </tr>

                <tr>
                    <th>I级机构</th>
                    <td>

                        {{form.first_kind_name}}

                    </td>

                    <th>II级机构</th>
                    <td>
                        {{form.second_kind_name}}
                    </td>

                    <th>III级机构</th>
                    <td>
                        {{ form.third_kind_name}}

                    </td>
                </tr>

                <!-- 职位信息 -->
                <tr>
                    <th>职位分类</th>
                    <td>
                        {{ form.human_major_kind_name}}

                    </td>

                    <th>职位名称</th>
                    <td>
                        {{ form.hunma_major_name }}

                    </td>

                    <th>职称</th>
                    <td>

                        {{ form.human_pro_designation }}




                    </td>
                </tr>

                <!-- 基础信息 -->
                <tr>
                    <th>姓名</th>
                    <td>  {{form.human_name}}     </td>
                    <th>性别</th>
                    <td>

                        {{form.human_sex}}



                    </td>
                    <th>EMAIL</th>
                    <td>
                        {{form.human_email}}

                    </td>
                </tr>

                <!-- 联系方式 -->
                <tr>
                    <th>电话</th>
                    <td>


                        {{form.human_telephone}}

                    </td>
                    <th>QQ</th>
                    <td> {{form.human_qq}}  </td>
                    <th>手机</th>
                    <td>

                        {{form.human_mobilephone}}

                    </td>
                </tr>

                <!-- 地址信息 -->
                <tr>
                    <th>住址</th>
                    <td colspan="3">
                        {{form.human_address}}

                    </td>
                    <th>邮编</th>
                    <td>
                        {{form.human_postcode}}

                    </td>
                </tr>

                <!-- 个人背景 -->
                <tr>
                    <th>国籍</th>
                    <td>
                        {{form.human_nationality}}



                    </td>
                    <th>出生地</th>
                    <td>

                        {{form.human_birthplace}}

                    </td>
                    <th>生日</th>
                    <td>
                        {{form.human_birthday}}


                    </td>
                    <th>民族</th>
                    <td>
                        {{form.human_race}}

                    </td>
                </tr>

                <!-- 政治信息 -->
                <tr>
                    <th>宗教信仰</th>
                    <td>
                        {{form.human_religion}}


                    </td>
                    <th>政治面貌</th>
                    <td>
                        {{form.human_party}}

                    </td>
                    <th>身份证号码</th>
                    <td>
                        {{form.human_id_card}}

                    </td>
                    <th>社会保障号码</th>
                    <td>
                        {{form.human_society_security_id}}

                    </td>
                </tr>

                <!-- 教育信息 -->
                <tr>
                    <th>年龄</th>
                    <td>

                        {{form.human_age}}
                    </td>
                    <th>学历</th>
                    <td>
                        {{form.human_educated_degree}}


                    </td>
                    <th>教育年限</th>
                    <td>
                        {{form.human_educated_years}}


                    </td>
                    <th>学历专业</th>
                    <td>
                        {{form.human_educated_major}}


                    </td>
                </tr>

                <!-- 薪酬信息 -->
                <tr>
                    <th>薪酬标准</th>
                    <td>
                        {{form.salary_standard_name}}



                    </td>
                    <th>开户行</th>
                    <td>

                        {{form.human_bank}}
                    </td>
                    <th>帐号</th>
                    <td>
                        {{form.human_account}}

                    </td>
                    <th>复核人</th>
                    <td>
                        {{form.checker}}

                    </td>
                </tr>

                <!-- 时间与特长 -->
                <tr>
                    <th>复核时间</th>
                    <td>



                        {{form.check_time}}

                    </td>
                    <th>特长</th>
                    <td>
                        {{form.human_speciality}}


                    </td>
                    <th>爱好</th>
                    <td>
                        {{form.human_hobby}}


                    </td>
                </tr>

                <!-- 文本区域 -->
                <tr>
                    <th>个人履历</th>
                    <td colspan="7">  <el-input v-model="form.human_histroy_records" type="textarea" :rows="2" /></td>
                </tr>
                <tr>
                    <th>家庭关系信息</th>
                    <td colspan="7"> <el-input v-model="form.human_family_membership" type="textarea" :rows="2" /> </td>
                </tr>
                <tr>
                    <th>备注</th>
                    <td colspan="7"> <el-input v-model="form.remark" type="textarea" :rows="2" /> </td>
                </tr>


            </table>

            <!-- 按钮容器，放置在表格外部 -->
            <div class="button-container">

                <el-button type="button" v-on:click="fanhui">返回</el-button>
            </div>

        </form>

    </div>



    <script type="text/javascript">
                    const { createApp, ref, onMounted, reactive } = Vue;
                       const { ElMessage } = ElementPlus;


                const app = createApp({
                    setup()
                    {

                            // 表单数据模型
                      const form = reactive({
                        huf_id: '',
                        human_id: '',
                        first_kind_name: '',
                        second_kind_name: '',
                        third_kind_name: '',
                        human_major_kind_name: '',
                        hunma_major_name: '',
                        human_pro_designation: '',
                        human_name: '',
                        human_sex: '',
                        human_email: '',
                        human_telephone: '',
                        human_qq: '',
                        human_mobilephone: '',
                        human_address: '',
                        human_postcode: '',
                        human_nationality: '',
                        human_birthplace: '',
                        human_birthday: '',
                        human_race: '',
                        human_religion: '',
                        human_party: '',
                        human_id_card: '',
                        human_society_security_id: '',
                        human_age: '',
                        human_educated_degree: '',
                        human_educated_years: '',
                        human_educated_major: '',
                        salary_standard_name: '',
                        human_bank: '',
                        human_account: '',
                        checker: '',
                        check_time: '',
                        human_speciality: '',
                        human_hobby: '',
                        attachment_name: '',
                        human_histroy_records: '',
                        human_family_membership: '',
                        remark: '',
                        imageFileName: ''
                      });



                        const imageUrl = ref(''); // 图片URL
                        const fileName = ref(''); // 文件名

                        // 从后端获取图片文件名
                        const imageFileName = ref('');




                         // 初始化时调用
                        onMounted(() => {
                            // 从ViewBag获取后端传递的图片文件名
                           // imageFileName.value = '@ViewBag.ImageFileName ' || '';
                            if (imageFileName.value) {
                                // 构建图片访问路径并渲染
                                imageUrl.value = getImageUrl();
                            }
                            console.log('接收的文件名称',imageFileName.value);
                        });

                        // 获取图片完整路径
                        const getImageUrl = () => {
                            if (!imageFileName.value) return '';

                                try {
                                    // 从文件名解析日期（假设文件名格式为 YYYYMMDDHHmmssfff.ext）
                                    const fullName = imageFileName.value.trim();
                                    const datePart = fullName.substring(0, 8);
                                    const year = datePart.substring(0, 4);
                                    const month = datePart.substring(4, 6);
                                    const day = datePart.substring(6, 8);

                                    // 构建路径：/年/月/日/文件名
                                    const path = `/Uploader/${year}/${month}/${day}/${fullName}`;
                                    console.log('解析日期生成路径:', path);
                                    return path;
                                }
                                catch (error) {
                                    console.error('文件名解析失败:', error);
                                    //  fallback: 使用当前日期（仅作为临时方案）
                                    const today = new Date();
                                    const y = today.getFullYear();
                                    const m = String(today.getMonth() + 1).padStart(2, '0');
                                    const d = String(today.getDate()).padStart(2, '0');
                                    const fallbackPath = `/Uploader/${y}/${m}/${d}/${imageFileName.value}`;
                                    console.log('当前日期生成路径:', fallbackPath);
                                    return fallbackPath;
                                }
                        };



                                    // 图片上传前验证
                            const beforeAvatarUpload = (rawFile) => {
                                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
                                const isAllowedType = allowedTypes.includes(rawFile.type);
                                const isLt2M = rawFile.size / 1024 / 1024 < 2;

                                if (!isAllowedType) {
                                    ElMessage.error('仅支持 JPG/JPEG/PNG/GIF 格式图片');
                                    return false;
                                }
                                if (!isLt2M) {
                                    ElMessage.error('文件大小不能超过 2MB');
                                    return false;
                                }

                                // 预览图片
                                const reader = new FileReader();
                                reader.onload = (e) => {
                                    imageUrl.value = e.target.result;
                                };
                                reader.readAsDataURL(rawFile);



                                return true;
                            };




                      // 处理图片上传成功
                       const handleAvatarSuccess = (response, uploadFile) => {
                          console.log('后端返回数据:', uploadFile);
                          // 更新文件名和图片URL
                          fileName.value = uploadFile.response.wjnames;
                          imageFileName.value = fileName.value;
                          imageUrl.value = getImageUrl();
                      };





                        function fanhui(){
                            window.location.href='/RLCX/Index3';
                        }



                         // 从URL获取id
                const getUrlId = () => {
                    const urlParams = new URLSearchParams(window.location.search);
                    const id = urlParams.get('id');
                    console.log('接收到的human_file表的主键值为:', id);
                    return id;
                };


                   // 根据id获取调动记录数据
                const fetchOriginalData = async (id) => {
                    if (id) {
                        try {
                            const response = await axios.get(`/RLCX/CXZS/?id=${id}`);
                            const data = response.data.data;

                            console.log('数据查看',data);


                            if (data) {
                                // 填充基础信息

                                form.huf_id=data.huf_id;
                                form.human_id = data.human_id;
                                form.human_name = data.human_name;
                                form.human_id_card = data.human_id_card;
                                form.first_kind_name=data.first_kind_name;
                                form.second_kind_name=data.second_kind_name;
                                form.third_kind_name=data.third_kind_name;
                                form.human_major_kind_name=data.human_major_kind_name;
                                form.hunma_major_name=data.hunma_major_name,
                                form.human_pro_designation=data.human_pro_designation;
                                form.human_email=data.human_email;
                                form.human_mobilephone=data.human_mobilephone;
                                form.human_telephone=data.human_telephone;
                                 form.human_sex=data.human_sex;
                                 form.human_qq=data.human_qq;
                                 form.human_address=data.human_address;
                                 form.human_postcode=data.human_postcode;
                                 form.human_nationality=data.human_nationality;
                                 form.human_birthplace=data.human_birthplace;

                                // form.human_birthday=data.human_birthday;
                                 // 关键：格式化生日为 YYYY-MM-DD
                                 if (data.human_birthday) {
                                   // 将后端返回的日期转换为 Date 对象
                                   const birthday = new Date(data.human_birthday);
                                   // 格式化为 YYYY-MM-DD（注意月份需+1，且补零）
                                   const year = birthday.getFullYear();
                                   const month = String(birthday.getMonth() + 1).padStart(2, '0'); // 月份从0开始
                                   const day = String(birthday.getDate()).padStart(2, '0');
                                   form.human_birthday = `${year}-${month}-${day}`; // 赋值格式化后的值
                                 } else {
                                   form.human_birthday = ''; // 若后端无数据，设为空
                                 }



                                 form.human_race=data.human_race;
                                 form.human_religion=data.human_religion;
                                 form.human_party=data.human_party;
                                 form.human_society_security_id=data.human_society_security_id;
                                 form.human_age=data.human_age;
                                 form.human_educated_degree=data.human_educated_degree;
                                 form.human_educated_years=data.human_educated_years;
                                 form.human_educated_major=data.human_educated_major;
                                 form.salary_standard_name=data.salary_standard_name;
                                 form.human_bank=data.human_bank;
                                 form.human_account=data.human_account;
                                 form.checker=data.checker;
                                 form.human_speciality=data.human_speciality;
                                 form.human_hobby=data.human_hobby;
                                 form.human_histroy_records=data.human_histroy_records;
                                 form.human_family_membership=data.human_family_membership;
                                 form.remark=data.remark;


                                        // 在赋值时添加格式化逻辑
                                  if (data.check_time) {
                                    const checkTime = new Date(data.check_time); // 转换为Date对象
                                    // 处理无效日期（若后端返回格式错误，Date会为Invalid Date）
                                    if (isNaN(checkTime.getTime())) {
                                      form.check_time = '无效时间';
                                    } else {
                                      const year = checkTime.getFullYear();
                                      const month = String(checkTime.getMonth() + 1).padStart(2, '0'); // 月份从0开始，补零
                                      const day = String(checkTime.getDate()).padStart(2, '0');
                                      const hours = String(checkTime.getHours()).padStart(2, '0');
                                      const minutes = String(checkTime.getMinutes()).padStart(2, '0');
                                      const seconds = String(checkTime.getSeconds()).padStart(2, '0');
                                      form.check_time = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                                    }
                                  } else {
                                    form.check_time = ''; // 无数据时显示空
                                  }




                                 imageFileName.value=data.human_picture;

                                  // 手动调用getImageUrl()更新图片路径
                    imageUrl.value = getImageUrl();


                                console.log('数据填充成功', data);
                            }
                        } catch (error) {
                            console.error('获取数据失败:', error);
                            ElMessage.error('获取数据失败，请重试');
                        }
                    }
                };

                const id=getUrlId();

                fetchOriginalData(id);



                        return{
                            fanhui,
                            imageUrl,
                            fileName,
                            imageFileName,
                            getImageUrl,
                            handleAvatarSuccess,
                            beforeAvatarUpload,
                            id,
                            form,

                        }

                    }
        })
        app.use(ElementPlus).mount('#app');

    </script>



</body>

</html>    